<template>
	<view>
		<view id="report">
			<image id="img" :src="url" mode="widthFix"></image>
			<view id="qr">
				<image :src="qrImg"></image>
				<p>扫码查询</p>
			</view>
		</view>
		<view>
			<view id="tgqh">
				<view>{{tips}}</view>
				<uni-tag @click="change()" text="换张宣传图" type="primary" />
			</view>

			<view id="tglj">
				<view>
					<uni-title type="h3" title="推广链接(可与推广宣传图搭配使用)"></uni-title>
					<text>将链接复制到浏览器中打开<span v-if="update" @click="refresh()" class="h">刷新链接</span></text>
					<text id="t2">{{cxUrl}}</text>
				</view>
				<view id="but">
					<button class="but_" type="primary" @click="copyText">复制分享链接</button>
					<button class="but_" type="primary" @click="saveImg">保存宣传海报</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import QRCode from '@/node_modules/qrcode'
	import html2canvas from 'html2canvas'
	import {
		img
	} from '@/api/product'

	import {
		updateIC
	} from '@/api/system/user'

	export default {
		data() {
			return {
				urls: null,
				url: null,
				ic: '',
				baseUrl: null,
				tips: '长按图片保存，分享给用户查询得佣金',
				cxUrl: null,
				qrImg: null,
				i: 0,
				update: false,
				
				PATH: {
					captain: 'register', // 队长
					member: 'register', // 队员	
					bdp: 'professional', // 信用报告-专业版 
					bd: 'ordinary', // 信用报告-普通版
					com: 'company', // 企业纳税信息
					mar: 'marriage', // 婚恋信息
					jud: 'judicial', // 个人司法诉讼
					imm: 'immovables', // 个人不动产
					edu: 'education', // 个人不动产
					mili: 'military' // 个人不动产
				}
			}
		},
		onLoad(option) {
			console.log('--option--', option)
			if (!option.index || option.index == '' || option.index == 'null') {
				this.$modal.msgLoading('链接异常')
				return
			}
			let index = option.index
			img(index).then(res => {
				if (res.urls) {
					this.urls = res.urls
					this.url = res.urls[0]
				}
				this.ic = res.ic
				this.baseUrl = window.location.origin + '/pages/' + this.PATH[index] + '?'
				if (index == 'captain' || index == 'member') {
					uni.setNavigationBarTitle({
						title: "邀请代理"
					})
					this.tips = '长按图片保存，注册发展代理赚提成'
					this.cxUrl = this.baseUrl + 'ic=' + this.ic
					this.update = true
				} else {
					this.cxUrl = this.baseUrl + 'ui=' + this.$store.state.user.userid
				}
				QRCode.toDataURL(this.cxUrl, (err, qrCodeData) => {
					if (err) console.error(err)
					this.qrImg = qrCodeData
				})
			})
		},
		methods: {
			refresh() {
				let this_ = this
				uni.showModal({
					title: '刷新邀请码',
					content: '刷新后之前的邀请链接会失效，请谨慎！',
					cancelText: '取消',
					confirmText: '确定刷新',
					success: function(res) {
						console.log(this_.ic)
						if (res.confirm) {
							updateIC(this_.ic).then(res => {
								this_.ic = res.msg
								this_.cxUrl = this_.baseUrl + 'ic=' + res.msg
								QRCode.toDataURL(this_.cxUrl, (err, qrCodeData) => {
									if (err) console.error(err)
									this_.qrImg = qrCodeData
								})
							});
						}
					}
				})
			},
			saveImg() {
				if (!this.qrImg) {
					uni.showToast({
						title: '图片尚未生成',
						icon: 'none'
					})
					return
				}
				html2canvas(document.querySelector("#report"), {
					allowTaint: true,
					useCORS: true, // 设置跨域
					tainttest: true, // 检测每张图片都已经加载完成
					backgroundColor: null, //背景色, 转换图片可能会有白色底色，不要的话就null
				}).then((canvas) => {
					const link = document.createElement("a"); // 创建一个超链接对象实例
					link.download = Date.now() + '.png'; // 设置要下载的图片的名称
					link.href = canvas.toDataURL(); // 将图片的URL设置到超链接的href中
					link.click(); // 触发超链接的点击事件
				})
			},
			change() {
				if (this.urls.length == 1) {
					this.$modal.msg("目前仅一张供选择")
					return
				}
				this.i = this.urls[++this.i] ? this.i : 0
				this.url = this.urls[this.i]
			},
			copyText() {
				this.$copyText(this.cxUrl).then((e) => {
					this.$modal.msgSuccess('已复制快分享吧！')
				}, (e) => {
					alert('Can not copy')
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: linear-gradient(180deg, #c4d6ff, #f7f8fa);
		min-height: 100%;
	}

	#report {
		position: relative;

		#img {
			width: 100vw;
			height: 1920px;
		}

		#qr {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);

			image {
				width: 40vw;
				height: 40vw;
			}

			p {
				text-align: center;
			}
		}
	}

	#tgqh {
		display: flex;
		justify-content: space-between;
		margin: 2px 6px;

		view {
			padding: 3px;
		}
	}

	.h {
		width: 40px;

		padding: 3px;
		text-align: center;
		background-color: #2979ff;
		border-radius: 5px;
		color: #fff;
	}

	#tglj {
		margin: 10rpx;
		padding: 10rpx;
		border-radius: 16rpx;
		background-color: #fff;

		#t2 {
			line-height: 80rpx;
			font-weight: bold;
		}

		#but {
			display: flex;
			justify-content: center;

			.but_ {
				width: 48%;
				padding: 10px;
			}
		}
	}
</style>